<html>
<head>
<style>

div.sidebar {position: absolute; z-index: 1; background-color: cornflowerblue; top: 20; left: 30; width: 150px; height: 35%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-size: 16pt;}


div.maintext {position: absolute; z-index: 2; background-color: darkkhaki; top: 55;left: 100px; height: 75%; width: 75%;
  opacity: 0.6;   /*supported by current Mozilla, Safari, and Opera*/
  -moz-opacity: 0.6;  /*older Mozilla*/
  -khtml-opacity: 0.6;   /*older Safari*/
  filter: alpha(opacity=60);  /*older IE*/
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60) /* IE */ } 

</style>

</head>
<body >
<div class="sidebar"> Take a look at this sidebar! Manipulate z-index, opacity and position and you can get some great effects.</div>
<div class="maintext">   

</div>
</body>
</html>
